<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-7 flex v-align-c">
      <span></span>
      <i>富文本</i>
    </h2>
    <div class="pad-l-1">
      <vue-ueditor-wrap ref="editor" style="width: 100%" v-model="details.text.content" :config="ueConfig"></vue-ueditor-wrap>
    </div>
  </div>
</template>

<style lang="less" scoped>
</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import VueUeditorWrap from 'vue-ueditor-wrap'

  export default {
    components: { VueUeditorWrap },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        ueConfig: {
          toolbars: [['source', 'undo', 'fontsize', 'paragraph', '|', 'bold', 'italic', 'underline', 'strikethrough', 'forecolor', 'backcolor', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', 'blockquote', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'simpleupload', 'removeformat', 'inserttable', 'deletetable', 'insertrow', 'deletecol', 'insertcol', 'deleterow', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols']],
          // 初始容器高度
          initialFrameHeight: 300,
          // 初始容器宽度
          initialFrameWidth: '100%'
        },
        details: {
          text: {
            content: ''
          }
        },
        form: {
          description: ''
        }
      }
    },
    // 初始化页面
    created() {
      this.details = this.details1
      this.details.text = this.details1.text
      this.details.text.content = this.details1.text.content
      const that = this
      this.$bus.$on('resetDetailsText', function(details) {
        if (!that.$refs.editor) {
          return
        }
        that.details = details
      })
      this.$bus.$emit('textFormData', this.details)
    },
    methods: {
    }
  }
</script>
